<template>
	<view class="page">
		<view id="navbar">
			<NavbarHead :toTop="false" :leftTitle="basicInfo.name" bgColor="rgba(0,0,0,0)"></NavbarHead>
		</view>

		<view class="bick-box">

			<image v-if="basicInfo != null" class="bike-img" :src="basicInfo.img" mode=""></image>
			<image v-else class="bike-img"
				src="https://wyc.jslhkj.cn/uploads/20231101/b34a253a6d5f79d9b4ae42d53a417814.png" mode=""></image>


			<view class="basic-dl">
				<view class="basic-item-title"></view>
				<view class="dl-box">
					<image src="../../static/images/other/cell.png" class="cell-img" alt=""></image>
					<view class="dl"></view>
				</view>
				<view class="basic-item-right">
					<view class="basic-item-unit">{{basicInfo.ebattle.split('.')[0]}}</view>
				</view>
			</view>

			<!-- 			<view class="basic-xc" :style="{top:topHeadHeight + 'rpx'}">
				<view class="xc">
					<view class="">
						ebike-二代
					</view>
				</view>
			</view> -->

		</view>

		<view class="bike-basic-box">
			<view class="bick-title">
				仪表盘
			</view>

			<view class="bike-basic">
				<!-- 				<view class="bike-basic-cell">
					<view class="bick-basic-name">电量：</view>
					<view class="bick-basic-value">{{basicInfo.name}}</view>
				</view> -->
				<view class="bike-basic-cell">
					<view class="bick-basic-name">
						<image class="bick-basic-img" src="../../static/images/other/licheng.png" mode=""></image>
					</view>
					<view class="bick-basic-value">里程
						<view class="">
							{{basicInfo.name}}
						</view>
					</view>
				</view>
				<view class="bike-basic-cell">
					<view class="bick-basic-name">
						<image class="bick-basic-img" src="../../static/images/other/sudu.png" mode=""></image>
					</view>
					<view class="bick-basic-value">平均车速<view class="">
							{{basicInfo.name}}
						</view>
					</view>
				</view>
				<view class="bike-basic-cell">
					<view class="bick-basic-name">
						<image class="bick-basic-img" src="../../static/images/other/sudu.png" mode=""></image>
					</view>
					<view class="bick-basic-value">最高车速<view class="">
							{{basicInfo.name}}
						</view>
					</view>
				</view>
				<view class="bike-basic-cell">
					<view class="bick-basic-name">
						<image class="bick-basic-img" src="../../static/images/other/shijian.png" mode=""></image>
					</view>
					<view class="bick-basic-value">骑行时间<view class="">
							{{basicInfo.name}}
						</view>
					</view>
				</view>
				<view class="bike-basic-cell">
					<view class="bick-basic-name">
						<image class="bick-basic-img" src="../../static/images/other/energy.png" mode=""></image>
					</view>
					<view class="bick-basic-value">消耗能量<view class="">
							{{basicInfo.name}}
						</view>
					</view>
				</view>
			</view>
		</view>


		<view class="position-box">
			<view class="bick-title">
				车辆定位
			</view>
			<view class="position-title">
				{{basicInfo.lastlocation}}
			</view>

			<map class="map" :latitude="latitude" :longitude="longitude" :markers="covers">
			</map>

		</view>

		<view class="aczn-box" v-for="item in bottomData" :key="index">
			<img class="aczn-img" :src="item.image" alt="">
		</view>


	</view>
</template>

<script>
	import NavbarHead from '../../components/NavbarHead/NavbarHead.vue';

	export default {
		data() {
			return {
				basicInfo: null,
				lineInfo: null,
				topHeadHeight: 172,
				latitude: 39.909,
				longitude: 116.39742,
				covers: [{
					latitude: 39.909,
					longitude: 116.39742,
					iconPath: '../../static/images/other/local.png'
				}],
				bottomData: [],
			}
		},
		onLoad() {
			this.getbikeinfo();
			this.Geticon();
			this.topHeadHeight = uni.getStorageSync('headHeight') * 2 || 172
		},
		methods: {
			// 获取基本信息
			getbikeinfo() {
				this.sendRequest({
					url: 'System.Mybike.bikelist',
					data: {
						uid: '4'
					},
					success: res => {
						if (res.code == 0) {
							console.log(res.data[0]);
							this.basicInfo = res.data[0];
						}
					}
				});
			},

			// 获取基本信息
			async getbikeinfo() {
				let res = await this.$api.getbikeinfo({
					uid: 9
				})

				this.basicInfo = res.data[0];

			},

			// 获取路线
			getLineInfo() {
				this.sendRequest({
					url: 'System.Mybike.rollbikelist',
					data: {
						bcode: 'ec0002'
					},
					success: res => {
						if (res.code == 0) {
							if (res.data == "") {
								this.lineInfo = res.data;
							}

						}
					}
				});
			},

			// 获取底部
			async Geticon() {
				let res = await this.$api.Geticon({
					type: 'ebikeBottom'
				})
				this.bottomData = res.data;
			}

		}
	}
</script>

<style lang="scss">
	.bike-img {
		width: 100vw;
		height: 75vw;
	}

	.bick-box {
		background-color: white;
		position: relative;
		// background: linear-gradient(rgba(47, 163, 255, 0.2), rgba(255, 255, 255, 1));
		background-color: white;
	}

	.bike-basic {
		width: 100%;
		padding-bottom: 20rpx;
		display: flex;
		flex-wrap: wrap;
		font-size: 26rpx;
		justify-content: space-between;

		.bike-basic-cell {
			width: calc(20% - 18rpx);
			height: 180rpx;
			padding: 5rpx;
			text-align: center;
			margin: 0 5rpx;
			background-color: #b5daea;
			border-radius: 10rpx;
		}
	}

	.bike-line {
		width: 100vw;
		background-color: white;
		margin-top: 10rpx;
		padding: 0 20rpx;
	}

	.bick-title {
		font-size: 28rpx;
		font-weight: 700;
		height: 70rpx;
		line-height: 70rpx;
	}

	.bike-basic-box {
		margin: 20rpx;
		padding: 0 20rpx;
		background-color: white;
		border-radius: 10rpx;
	}


	.bick-basic-name {
		line-height: 100rpx;
		font-weight: 700;
		height: 100rpx;
		text-align: center;
	}

	.bick-basic-value {
		line-height: 40rpx;
		font-size: 22rpx;
	}

	.basic-info {
		position: absolute;
		bottom: 0;
		// background-color: rgba(10, 10, 10, 0.1);
		width: 100%;
		height: 200rpx;

		.basic-1 {
			display: flex;
			padding: 40rpx 80rpx 0 80rpx;
			justify-content: space-between;

			.basic-item {
				display: flex;
				height: 100rpx;

				.basic-item-title {
					font-size: 54rpx;
					line-height: 100rpx;
				}

				.basic-item-right {
					font-size: 28rpx;
					margin-left: 20rpx;

					.basic-item-unit {
						height: 50rpx;
						line-height: 50rpx;

					}

					.basic-item-name {
						height: 50rpx;
						line-height: 50rpx;
					}
				}
			}

		}
	}


	.map {
		width: 100%;
		height: 400rpx;
		border-radius: 15rpx;
	}

	.position-box {
		margin: 20rpx 20rpx 0 20rpx;
		padding: 0 20rpx 20rpx 20rpx;
		background-color: white;
		border-radius: 10rpx;
	}

	.position-title {
		// height: 60rpx;
		line-height: 40rpx;
		font-size: 24rpx;
		padding: 15rpx 0;
		overflow-y: scroll;
		color: #666;
	}

	.aczn-box {
		margin: 20rpx 20rpx 20rpx 20rpx;
		border-radius: 10rpx;
	}

	.aczn-img {
		width: 100%;
		height: 150rpx;
		border-radius: 10rpx;
	}

	.xc {
		font-size: 26rpx;
		font-weight: 700;
		line-height: 100rpx;
	}

	.xc-img {
		width: 70rpx;
		height: 70rpx;
		margin-top: 10rpx;
	}

	.xc-img-box {
		background-color: #ddd;
		width: 90rpx;
		height: 90rpx;
		text-align: center;
		border: 1rpx solid #ccc;
		border-radius: 10rpx;
		margin-bottom: 10rpx;
		margin-left: 5rpx;
	}

	.page {
		padding-bottom: 20rpx;
		background-color: #e6ecec;
	}

	.dl-box {
		position: relative;
	}

	.cell-img {
		width: 100rpx;
		height: 100rpx;
		margin-top: 16rpx;
	}

	.dl {
		width: 40rpx;
		height: 72rpx;
		background-color: #04f50d;
		position: absolute;
		top: 34rpx;
		left: 31rpx;
	}

	.bick-basic-img {
		width: 60rpx;
		height: 60rpx;
		margin-top: 15rpx;
	}

	.basic-dl {
		position: absolute;
		top: 240rpx;
		right: 50rpx;
	}

	.basic-xc {
		position: absolute;
		top: 80rpx;
		left: 50rpx;
	}

	.basic-item-right {
		font-size: 28rpx;
		margin-left: 20rpx;
		position: absolute;
		top: 50rpx;
		left: 15rpx;
		color: black;
	}
</style>